<template>
	<div class="main">
		<div class="head">
			<van-image
			  round
			  width="2rem"
			  height="2rem"
			  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
			/>
			<div class="detail">
				<div class="name"><span>{{teacher.realName}}</span></div>
				<div class="xuehao"><span>{{teacher.teacherNo}}</span></div>
			</div>
		</div>
		<div class="groups">
			<!-- <div class="item">
				<van-cell title="我的成绩" is-link @click="toScore" />
			</div> -->
			<div class="item">
				<van-cell title="评分排名" is-link @click="tofinishpj" />
			</div>
			<div class="item">
				<van-cell title="退出系统" is-link @click="logout"/>
			</div>
			<!-- <div class="item">
				<van-cell title="隐私保护摘要" is-link />
			</div> -->
		</div>
		<div class="low">
			<router-view></router-view>
			<van-tabbar  route>
			  <van-tabbar-item replace to="/teacher" icon="home-o">首页</van-tabbar-item>
			 <!-- <van-tabbar-item replace to="/server" icon="search">服务中心</van-tabbar-item> -->
			  <van-tabbar-item replace to="/teacherInfo" icon="setting-o">个人信息</van-tabbar-item>
			</van-tabbar>
		</div>
	</div>
</template>

<script>
	import {getTeacherInfo} from '@/api/teacher'
	import { Dialog, Toast } from 'vant';
	export default {
		data() {
			return{
				userId:this.$store.getters.userId,
				teacher:[]
			}
		},
		created() {
			this.getTeacherInfo()
		},
		methods:{
			async getTeacherInfo(){
				const result=await getTeacherInfo(this.userId)
				if(result.code==200){
					this.teacher=result.data
				}
			},
			logout(){
				Dialog.confirm({
				  title: '标题',
				  message:
				    '确定要退出该系统吗？',
				})
				  .then(() => {
				   this.$store.dispatch('FedLogOut').then(()=>{
					Toast.success('退出成功')
					this.$router.push('/login')
				}).catch(()=>{
					Toast.fail('退出失败')
				})
				  })
				  .catch(() => {
				   Toast('已取消退出系统!')
				  });
				
			},
			tofinishpj(){
				this.$router.push('/rank')
			}
		}
	}
</script>

<style scoped>
	.head{
		display: flex;
		padding: 20px 0 0 15px;
		background-color: #00CCFF;
		height: 100px;
	}
	.detail{
		padding-left: 20px;
	}
	.name{
		font-size: 20px;
	}
	.xuehao{
		padding-top: 10px;
		font-size: 20px;
	}
	.item{
		padding-top: 5px;
	}
</style>